<template>
  <view class="create-group">
    <!-- 导航栏 -->
    <u-navbar 
      title="创建群聊" 
      :is-back="true" 
      @back="navigateBack"
    ></u-navbar>
    
    <!-- 表单内容 -->
    <view class="form-content">
      <view class="form-item">
        <text class="label">群名称</text>
        <input 
          type="text" 
          placeholder="请输入群名称" 
          v-model="name"
        />
      </view>
      
      <view class="form-item">
        <text class="label">群头像</text>
        <view class="avatar-container" @click="selectAvatar">
          <image :src="avatarUrl" mode="aspectFill"></image>
          <text class="upload-text">上传头像</text>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">群描述</text>
        <textarea 
          placeholder="请输入群描述" 
          v-model="description"
        ></textarea>
      </view>
    </view>
    
    <!-- 创建按钮 -->
    <u-button 
      class="create-btn" 
      type="primary" 
      @click="createGroup"
      :disabled="!isValidForm"
    >
      创建群聊
    </u-button>
  </view>
</template>

<script>
import { GroupApi,CommonApi } from '@/api/index.js';
import websocketMixin from '@/utils/mixins/websocketMixin'

export default {
  mixins: [websocketMixin],
  data() {
    return {
      name: "",
	  avatarUrl: "", 
      description: "",
    };
  },
  computed: {
    isValidForm() {
      return this.name.trim() !== "";
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
	// 上传头像
    async selectAvatar() {
        try {
            const res = await new Promise((resolve, reject) => {
                uni.chooseImage({
                    count: 1,
                    success: resolve,
                    fail: reject
                });
            });
    
            const tempFilePath = res.tempFilePaths[0];
    
            uni.showLoading({ title: '上传中...' });
    
            // 调用 uploadFile 接口
            const uploadRes = await CommonApi.uploadFile(tempFilePath);
    
            uni.hideLoading();
    
            if (uploadRes && uploadRes.code === 200) {
                uni.showToast({ title: '上传成功', icon: 'success' });
                this.avatarUrl = uploadRes.data.url; // 设置头像 URL
            } else {
                uni.showToast({ title: '上传失败', icon: 'none' });
            }
    
        } catch (e) {
            uni.hideLoading();
            console.error("上传错误", e);
            uni.showToast({ title: '上传失败', icon: 'none' });
        }
    },
	async createGroup() {
	    if (!this.isValidForm) {
	        uni.showToast({ title: '请输入群名称', icon: 'none' });
	        return;
	    }
	
	    const groupData = {
	        name: this.name,
	        avatarUrl: this.avatarUrl || '',
	        description: this.description || ''
	    };
	
	    uni.showLoading({ title: '创建中...' });
	
	    try {
	        const res = await GroupApi.createGroup(groupData);
	
	        if (res && res.code === 200) {
	            uni.hideLoading();
	            uni.showToast({
	                title: '创建成功',
	                icon: 'success',
	                duration: 1500,
	                success: () => {
	                    setTimeout(() => {
							uni.switchTab({
							    url: '/pages/groups/group'
							});
	                    }, 1000);
	                }
	            });
	        } else {
	            uni.hideLoading();
	            uni.showToast({ title: res.msg || '创建失败', icon: 'none' });
	        }
	    } catch (e) {
	        uni.hideLoading();
	        console.error("创建群组出错", e);
	        uni.showToast({ title: '网络异常，请重试', icon: 'none' });
	    }
	}
  }
};
</script>

<style lang="scss" scoped>
.create-group {
  padding-top: 100rpx;
  padding-bottom: 120rpx;

  .form-content {
    padding: 30rpx;

    .form-item {
      margin-bottom: 30rpx;

      .label {
        display: block;
        margin-bottom: 15rpx;
        color: #333;
        font-size: 28rpx;
      }

      input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        font-size: 28rpx;
      }

      textarea {
        width: 100%;
        min-height: 120rpx;
        padding: 20rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        font-size: 28rpx;
      }

      .avatar-container {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
        background-color: #f5f5f5;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }

        .upload-text {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          font-size: 24rpx;
        }
      }
    }
  }

  .create-btn {
    position: fixed;
    bottom: 30rpx;
    left: 30rpx;
    right: 30rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
  }
}
</style>